<!--左右伸缩-->
<template>
    <el-row  :gutter="20">
      <el-col :span="expand ? leftCols : 0 " >
        <div class="flex-box" :style="'height: calc(100vh - ' +removeHeight +'px)'">
          <slot name="left" />
        </div>
      </el-col>
      <el-col :span="expand ? rightCols : 24" >
        <div class="flex-box" :style="'height: calc(100vh - ' +  removeHeight + 'px);'">
          <!--左右箭头 -->
          <span class="left-arrow" @click="expandHandle">
            <i :class="{'el-icon-arrow-left':expand,'el-icon-arrow-right':!expand}"></i>
          </span>
          <slot name="right" />
        </div>
      </el-col>
    </el-row>
</template>

<script>
export default {
  name: "flexible",
  props:{
    leftCols:{ //总的cols为24
      type:Number,
      default:8
    },
    removeHeight:{
      type:Number,
      default: 160
    }
  },
  watch:{
    leftCols:{
      handler(newV,oldV){
        this.rightCols = 24 - this.leftCols ;
      },
      deep:true,
      immediate:true
    },
  },
  data(){
    return{
      expand:true,
      rightCols:16
    }
  },
  methods:{
    expandHandle(){
      this.expand = !this.expand
    },
    setExpand(value){
      this.expand = value ;
    }
  }
}
</script>

<style scoped>
.flex-box{
  border-radius: 16px;
  -webkit-box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  padding: 20px;
  background: #fbfbfd;
  /*overflow: hidden;
  height: calc(100vh - 160px) ;*/
  position: relative;
}
.left-arrow{
  width: 15px;
  height: 30px;
  background: #0a66c2;
  border-radius: 8px;
  position: absolute;
  right: 100%;
  top:44px ;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 3px;
}
</style>
